<template>
  <div class="table-box" v-loading="loading">
    <ProTable
      ref="proTable"
      title="酒店列表"
      rowKey="hotelid"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" text :icon="CirclePlus" @click="openDrawer('新增')">新增酒店</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="_delete(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <HotelDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="hotelManage">
import { ref } from "vue";

import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import HotelDrawer from "./components/HotelDrawer.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { getHotelList, deleteHotel, addHotel, editHotel } from "@/api/modules/smartLock/manage/hotelManage";

const loading = ref(false);

const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getHotelList(newParams);
};

const columns: any = [
  {
    prop: "hotelname",
    label: "酒店名称",
    search: { el: "input" },
    minWidth: 300
  },
  {
    prop: "hotelid",
    label: "",
    isShow: false
  },
  {
    prop: "geographyzone",
    label: "所属区域",
    search: { el: "input" },
    minWidth: 200
  },
  {
    prop: "vendorname",
    label: "安保公司",
    search: { el: "input" },
    minWidth: 200
  },
  // {
  //   prop: "serverip",
  //   label: "服务IP",
  //   minWidth: 300
  // },
  // {
  //   prop: "port",
  //   label: "端口",
  //   minWidth: 120
  // },
  { prop: "operation", label: "操作", fixed: "right", width: 180 }
];

// 删除酒店信息
const _delete = async params => {
  console.log(params);
  await useHandleData(deleteHotel, { hotelid: params.hotelid }, `删除【${params.hotelname}】`);
  proTable.value.getTableList();
};
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof HotelDrawer> | null>(null);
const openDrawer = (title: string, row = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addHotel : title === "编辑" ? editHotel : undefined,
    getTableList: proTable.value.getTableList,
    resetTableList: proTable.value.reset
  };

  drawerRef.value?.acceptParams(params);
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
